<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="20">
      <el-col class="el-col2">
        <el-button
          type="danger"
          icon="el-icon-plus"
          @click="onAddorEdit('add', 0)"
          >新增车型</el-button
        >
      </el-col>
    </el-row>
    <el-tree
      :data="arrlist"
      node-key="id"
      :expand-on-click-node="false"
      :render-content="renderContent"
      @node-click="selected"
    >
    </el-tree>

    <el-dialog
      :title="pjsizeTitle"
      width="500px"
      :visible.sync="isAddorEdit"
      @closed="closed('pjsizeform')"
      :close-on-click-modal="false"
    >
      <el-form
        ref="pjsizeform"
        :model="pjsizeform"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <form-input
            label="车系"
            v-model="pjsizeform.chexi"
            prop="chexi"
            placeholder="请输入车系"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="车型总称"
            v-model="pjsizeform.cxzc"
            prop="cxzc"
            placeholder="请输入车型总称"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="车型"
            v-model="pjsizeform.pjsize"
            prop="pjsize"
            placeholder="请输入车型"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="车型代码"
            v-model="pjsizeform.cxcode"
            prop="cxcode"
            placeholder="请输入车型代码"
          ></form-input>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closed('pjsizeform')">取 消</el-button>
        <el-button
          type="primary"
          @click="edit('pjsizeform')"
          v-if="btntext == '保 存'"
          >{{ btntext }}</el-button
        >
        <el-button type="danger" @click="append('pjsizeform')" v-else>{{
          btntext
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDsSizeListApi } from "@/api/cardApi";
import { getProSizeApi } from "@/api/cardApi";
import { getDsSizeApi } from "@/api/cardApi";

export default {
  data() {
    return {
      loading: true,
      isAddorEdit: false,
      isEdit: false,
      arrlist: [],
      pjsizeTitle: "",
      pjsizeform: {
        id: "",
        chexi: "",
        cxzc: "",
        pjsize: "",
        cxcode: "",
        pic: ""
      },
      btntext: "",
      rules: {
        chexi: [{ required: true, message: "请输入车系", trigger: "blur" }],
        cxzc: [{ required: true, message: "请输入车型总称", trigger: "blur" }],
        pjsize: [{ required: true, message: "请输入车型", trigger: "blur" }],
        cxcode: [{ required: true, message: "请输入车型代码", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getDsSizeListData();
  },
  methods: {
    getDsSizeListData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      getDsSizeListApi({
        guestcode: guestcode,
        gscode: gscode,
        username: username,
        userid: userid,
        menuename: "E-commerceModels",
        menucname: "电商车型",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        this.arrlist = [];
        let menulist = JSON.parse(res.list);
        for (var i = 0; i < menulist.length; i++) {
          if (menulist[i].pjsize.length == 1) {
            var nav = {
              id: menulist[i].id,
              chexi: menulist[i].chexi,
              carname: menulist[i].cxzc,
              label: "(" + menulist[i].chexi + ")" + menulist[i].cxzc,
              flabel: menulist[i].cxcode,
              children: []
            };
            this.arrlist.push(nav);
          }
        }
        for (var x = 0; x < menulist.length; x++) {
          if (menulist[x].pjsize.length > 1) {
            var cc = {
              id: menulist[x].id,
              chexi: "",
              sizename: menulist[x].cxcode,
              label: menulist[x].pjsize,
              pic: menulist[x].pic,
              children: []
            };
            for (var j = 0; j < this.arrlist.length; j++) {
              var str1 = this.arrlist[j].carname.toString();
              var str2 = menulist[x].cxzc.toString();
              if (str2.indexOf(str1) != -1) {
                this.arrlist[j].children.push(cc);
              }
            }
          }
        }
        this.data = this.arrlist;
      });
    },
    append(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          getProSizeApi({
            guestcode: guestcode,
            gscode: gscode,
            stype: "Add",
            chexi: this.pjsizeform.chexi,
            cxzc: this.pjsizeform.cxzc,
            size: this.pjsizeform.pjsize,
            cxcode: this.pjsizeform.cxcode
          }).then(res => {
            if (res.code == "0") {
              this.isAddorEdit = false;
              this.loading = true;
              this.$message.success("添加成功");
            } else {
              this.$message.error(res.msg);
            }
            this.getDsSizeListData();
          });
        } else {
          return false;
        }
      });
    },
    remove(val) {
      this.$confirm("您确定要删除当前车型吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          getProSizeApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Delete",
            id: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("删除成功");
              this.getDsSizeListData();
            }
          });
        })
        .catch(() => {});
    },
    edit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          getProSizeApi({
            guestcode: guestcode,
            gscode: gscode,
            stype: "Edit",
            chexi: this.pjsizeform.chexi,
            cxzc: this.pjsizeform.cxzc,
            size: this.pjsizeform.pjsize,
            cxcode: this.pjsizeform.cxcode,
            id: this.pjsizeform.id
          }).then(res => {
            if (res.code == "0") {
              this.isAddorEdit = false;
              this.loading = true;
              this.$message.success("修改成功");
            } else {
              this.$message.error(res.msg);
            }
            this.getDsSizeListData();
          });
        } else {
          return false;
        }
      });
    },
    selected(node) {
      this.pjsizeform.chexi = node.chexi;
      this.pjsizeform.cxzc = node.carname;
    },
    onAddorEdit(type, val) {
      this.isAddorEdit = true;
      if (type == "add") {
        this.pjsizeTitle = "新增";
        this.btntext = "添 加";
      } else {
        this.pjsizeTitle = "编辑";
        this.btntext = "保 存";
        let userdata = JSON.stringify(this.$store.state.user.user.info);
        userdata = JSON.parse(userdata);
        let guestcode = userdata.reguserno;
        let gscode = userdata.gscode;
        getDsSizeApi({
          guestcode: guestcode,
          gscode: gscode,
          id: val
        }).then(res => {
          if (res.code == "0") {
            this.pjsizeform = res.data[0];
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              style="color:#ffc107"
              on-click={() => this.onAddorEdit("edit", node.data.id)}
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              style="color:#F56C6C"
              on-click={() => this.remove(node.data.id)}
            >
              删除
            </el-button>
          </span>
        </span>
      );
    },
    closed(formName) {
      this.isAddorEdit = false;
      this.resetForm(formName);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  ::v-deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-col2 {
    margin-bottom: 10px;
  }

  ::v-deep .el-tree-node:focus > .el-tree-node__content {
    background-color: #2d8cf0; //背景色
    color: #fff;
    font-weight: bold;
  }
}
</style>
